<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>奖励中心 - 药品溯源防伪系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body class="bg-gray-50">
    <!-- iOS 状态栏 -->
    <div class="ios-status-bar">
        <div>
            <span class="text-sm font-medium">13:37</span>
        </div>
        <div class="flex items-center">
            <i class="fas fa-signal mr-1"></i>
            <i class="fas fa-wifi mr-1"></i>
            <i class="fas fa-battery-full"></i>
        </div>
    </div>

    <!-- 内容区域 -->
    <div class="content-area">
        <!-- 顶部标题 -->
        <div class="flex items-center justify-between mb-6">
            <h1 class="text-xl font-bold">奖励中心</h1>
        </div>

        <!-- 奖励余额 -->
        <div class="ios-card bg-gradient-to-r from-blue-500 to-blue-700 text-white mb-6">
            <h2 class="text-lg font-medium mb-1">奖励余额 (元)</h2>
            <div class="text-3xl font-bold mb-4">235.50</div>
            <div class="flex">
                <button class="flex-1 bg-white bg-opacity-20 text-white py-2 rounded-lg mr-2 text-sm">累计奖励</button>
                <button class="flex-1 bg-white text-blue-600 py-2 rounded-lg ml-2 text-sm font-medium">提现</button>
            </div>
        </div>

        <!-- 奖励分类 -->
        <div class="grid grid-cols-4 gap-4 mb-6">
            <div class="text-center">
                <div class="w-14 h-14 rounded-full bg-red-50 flex items-center justify-center mx-auto mb-2">
                    <i class="fas fa-yen-sign text-red-500 text-xl"></i>
                </div>
                <span class="text-xs">现金红包</span>
            </div>
            <div class="text-center">
                <div class="w-14 h-14 rounded-full bg-green-50 flex items-center justify-center mx-auto mb-2">
                    <i class="fas fa-ticket-alt text-green-500 text-xl"></i>
                </div>
                <span class="text-xs">优惠券</span>
            </div>
            <div class="text-center">
                <div class="w-14 h-14 rounded-full bg-purple-50 flex items-center justify-center mx-auto mb-2">
                    <i class="fas fa-award text-purple-500 text-xl"></i>
                </div>
                <span class="text-xs">积分</span>
            </div>
            <div class="text-center">
                <div class="w-14 h-14 rounded-full bg-yellow-50 flex items-center justify-center mx-auto mb-2">
                    <i class="fas fa-medal text-yellow-500 text-xl"></i>
                </div>
                <span class="text-xs">勋章</span>
            </div>
        </div>

        <!-- 选项卡 -->
        <div class="flex border-b border-gray-200 mb-4">
            <div class="py-2 px-4 border-b-2 border-blue-500 text-blue-500 font-medium">
                可用奖励
            </div>
            <div class="py-2 px-4 text-gray-500">
                历史记录
            </div>
        </div>

        <!-- 奖励列表 -->
        <div>
            <div class="reward-item">
                <div class="reward-icon">
                    <i class="fas fa-yen-sign text-red-500"></i>
                </div>
                <div class="reward-info">
                    <div class="reward-title">扫码现金奖励</div>
                    <div class="reward-description">阿莫西林胶囊扫码奖励</div>
                </div>
                <div class="reward-value">+2.00元</div>
            </div>
            
            <div class="reward-item">
                <div class="reward-icon">
                    <i class="fas fa-ticket-alt text-green-500"></i>
                </div>
                <div class="reward-info">
                    <div class="reward-title">新人优惠券</div>
                    <div class="reward-description">满100减10元</div>
                </div>
                <div class="text-sm text-gray-500">有效期至 2023-12-31</div>
            </div>
            
            <div class="reward-item">
                <div class="reward-icon">
                    <i class="fas fa-yen-sign text-red-500"></i>
                </div>
                <div class="reward-info">
                    <div class="reward-title">月度销售奖励</div>
                    <div class="reward-description">6月销售任务达成奖励</div>
                </div>
                <div class="reward-value">+50.00元</div>
            </div>
            
            <div class="reward-item">
                <div class="reward-icon">
                    <i class="fas fa-award text-purple-500"></i>
                </div>
                <div class="reward-info">
                    <div class="reward-title">连续扫码积分</div>
                    <div class="reward-description">连续7天扫码奖励</div>
                </div>
                <div class="reward-value text-purple-500">+200积分</div>
            </div>
        </div>

        <!-- 兑换区域 -->
        <div class="mt-8">
            <h3 class="text-lg font-bold mb-4">奖励兑换</h3>
            
            <div class="ios-card p-0 overflow-hidden">
                <img src="https://images.unsplash.com/photo-1556742502-ec7c0e9f34b1?q=80&w=400&auto=format&fit=crop" alt="Exchange" class="w-full h-32 object-cover">
                <div class="p-4">
                    <h4 class="font-bold mb-1">兑换礼品</h4>
                    <p class="text-sm text-gray-500 mb-2">使用积分或现金奖励兑换精美礼品</p>
                    <button class="text-sm text-white bg-blue-500 rounded-full px-4 py-1">立即兑换</button>
                </div>
            </div>
        </div>
    </div>

    <!-- iOS TabBar -->
    <div class="ios-tab-bar">
        <a href="home.html" class="tab-item">
            <i class="fas fa-home"></i>
            <span>首页</span>
        </a>
        <a href="scan.html" class="tab-item">
            <i class="fas fa-qrcode"></i>
            <span>扫一扫</span>
        </a>
        <a href="rewards.html" class="tab-item active">
            <i class="fas fa-gift"></i>
            <span>奖励</span>
        </a>
        <a href="profile.html" class="tab-item">
            <i class="fas fa-user"></i>
            <span>我的</span>
        </a>
    </div>
</body>
</html> 